<template>
  <!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
  <a-drawer
      v-model:open="visible"
      ref="employeeDetailModalRef"
      class="detail-drawer modal-fixed-bottom"
      root-class-name="root-customer-drawer"
      width="1000px"
      :closable="false"
      @close="onClose"
  >
    <div class="closeable" @click="closeModal">关闭</div>
    <div class="modal-header">{{ title }}</div>

    <a-form :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"
            @finish="onSubmit"
    >
      <a-form-item label="父节点" name="parent">
        <a-cascader v-model:value="formState.parent" :options="menuOptions"
                    :field-names="{ label: 'title', value: 'name', children: 'children' }"
                    placeholder="请选择父菜单节点" />
      </a-form-item>
      <a-form-item label="标题" name="title">
        <a-input v-model:value="formState.title" placeholder="输入title值" />
      </a-form-item>
      <a-form-item label="标识" name="name">
        <a-input v-model:value="formState.name" placeholder="输入name值" />
      </a-form-item>
      <a-form-item label="路由" name="path">
        <a-input v-model:value="formState.path" placeholder="输入path值" />
      </a-form-item>
      <a-form-item label="布局" name="component">
        <a-input v-model:value="formState.component" placeholder="输入component值" />
      </a-form-item>
      <a-form-item label="图标" name="icon">
        <choose-icon v-model:value="formState.icon"></choose-icon>
      </a-form-item>
      <a-form-item label="是否显示" name="showMenu">
        <a-switch v-model:checked="formState.showMenu" />
      </a-form-item>
      <div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
        <a-button type="primary" html-type="submit">立即提交</a-button>
        <a-button class="base-ml10" @click="onReset">重置</a-button>
      </div>
    </a-form>

  </a-drawer>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import ChooseIcon from '@/components/choose/choose-icon/choose-icon.vue'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL

const emit = defineEmits(['close','ok'])
const visible = ref(false)
// 模式，add新增，show查看，edit编辑
const mode = ref('add')
const mdl = ref({}) // 模型内容
const detail = ref({})
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const title = computed(() => {
  if(mode.value === 'add') {
    return '新增菜单'
  }else if(mode.value === 'add-son') {
    return '添加子菜单/节点'
  } else {
    return detail.value.name
  }
})
const menuOptions = ref([
  {
    path: '/dashboard',
    name: 'dashboard',
    redirect: '/dashboard/index',
    component: 'layouts/BasicLayout',
    meta: {
      title: '工作台',
      showMenu: true, // 是否显示
      icon: 'DashboardOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/dashboard/index',
        name: 'dashboardIndex',
        component: 'views/dashboard/index',
        meta: {
          title: '整体概况',
          showMenu: false, // 是否显示菜单
          icon: 'DashboardOutlined',
          type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
      }
    ]
  },
  {
    path: '/hrm',
    name: 'HRM',
    redirect: '/hrm/employee/list',
    component: 'layouts/BasicLayout',
    meta: {
      title: 'HRM',
      showMenu: true, // 是否显示
      icon: 'SolutionOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/hrm/employee',
        name: 'HRMEmployee',
        component: '',
        meta: {
          title: '员工管理',
          showMenu: true, // 是否显示菜单
          icon: '',
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/hrm/employee/list',
            name: 'HRMEmployeeList',
            component: 'views/hrm/employee/list',
            meta: {
              title: '员工管理',
              showMenu: true, // 是否显示菜单
              icon: '',
              type: 'menu',
              role: ['user']	// 必填
            },
          }
        ]
      },
    ]
  },
  {
    path: '/crm',
    name: 'crm',
    redirect: '/crm/my/clue',
    component: 'layouts/BasicLayout',
    meta: {
      title: 'CRM',
      showMenu: true, // 是否显示
      icon: 'FileTextOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/crm/clue',
        name: 'CRMClue',
        component: '',
        meta: {
          title: '线索管理',
          showMenu: true, // 是否显示菜单
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/crm/clue/my',
            name: 'CRMClueMy',
            component: 'views/crm/clue/my_list',
            meta: {
              title: '我的线索',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            },
          },
          {
            path: '/crm/clue/dep',
            name: 'CRMClueDep',
            component: 'views/crm/clue/dep_list',
            meta: {
              title: '部门线索',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            },
          },
        ]
      },
      {
        path: '/crm/manage',
        name: 'CRMManage',
        component: '',
        meta: {
          title: '客户管理',
          showMenu: true, // 是否显示菜单
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/crm/customer/my',
            name: 'CRMCustomerMy',
            component: 'views/crm/customer/my_list',
            meta: {
              title: '我的客户',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            },
          },
          {
            path: '/crm/customer/dep',
            name: 'CRMCustomerDep',
            component: 'views/crm/customer/dep_list',
            meta: {
              title: '部门客户',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            },
          },
        ]
      },
    ]
  },
  {
    path: '/setting',
    name: 'Setting',
    redirect: '/setting/base/job',
    component: 'layouts/BasicLayout',
    meta: {
      title: '设置',
      showMenu: true, // 是否显示
      icon: 'SettingOutlined',
      type: 'menu',
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/setting/base',
        name: 'SettingBase',
        component: '',
        meta: {
          title: '基本设置',
          showMenu: true, // 是否显示
          icon: '',
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/setting/base/department',
            name: 'SettingBaseDepartment',
            component: 'views/setting/base/department_list',
            meta: {
              title: '部门架构',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            },
          },
          {
            path: '/setting/base/role',
            name: 'SettingBaseRole',
            component: 'views/setting/base/role_list',
            meta: {
              title: '权限角色',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            },
          },
          {
            path: '/setting/base/job',
            name: 'SettingBaseJob',
            component: 'views/setting/base/job_list',
            meta: {
              title: '岗位职称',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            },
          },
          {
            path: '/setting/base/menu',
            name: 'SettingBaseMenu',
            component: 'views/setting/base/menu_list',
            meta: {
              title: '菜单管理',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            },
          }
        ]
      },
    ]
  }
])

const formState = ref({
  parent: [],     // 父节点
  path: '',
  name: '',
  component: '',
  title: '',
  showMenu: true,
  icon: '',
  type: 'menu',
  role: [],
})
const formRules = ref({
  title: [{required: true,message: '标题不能为空',trigger: 'change'}],
  name: [{required: true,message: '标识不能为空',trigger: 'change'}],
  path: [{required: true,message: '路由地址不能为空',trigger: 'change'}],
  role: [{type: 'array',required: true,message: '允许访问的角色必须勾选',trigger: 'change'}],
})

onMounted(() => {
  menuOptions.value = copyMetaTitle(menuOptions.value)
})

const copyMetaTitle = (arr) => {
  return arr.map(item => {
    const newItem = { ...item };
    if (newItem.children) {
      newItem.children = copyMetaTitle(newItem.children);
    }
    if (newItem.meta && newItem.meta.title) {
       newItem.title = newItem.meta.title;
    }
    return newItem;
  });
}

const onSubmit = (values) => {
  console.log('submit!', values);
};
const onReset = () => {
  $TOOL.array.cloneExistKey(formState.value, detail.value)
}

const closeModal = () => {
  visible.value = false
  // 重置模型数据和详情数据
  mdl.value = detail.value = {}
  // 重置表单数据
  formState.value = {
    status: 1,     // 状态
    title: '',        // 岗位名称
    groupName: [],    // 权限角色
    remark: '',       // 岗位备注
  }
  emit('close')
}
const add = () => {
  mode.value = 'add'
  visible.value = true
}

// 添加子菜单
const addSon = (record) => {
  mode.value = 'add-son'
  visible.value = true
  // mdl.value = detail.value = record
  console.log('添加子菜单', record)
}

const edit = (record) => {
  mode.value = 'edit'
  visible.value = true
  const useRecord = { ...record }
  useRecord.groupName = useRecord.groupName?useRecord.groupName.split(','):[]
  mdl.value = detail.value = useRecord

  $TOOL.array.cloneExistKey(formState.value, detail.value)
}


// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({
  add,
  addSon,
  edit
})
</script>

<style lang="scss" scoped>
.detail-drawer {
  position: relative;
  .closeable {
    @include closeable;
  }
}
</style>
